﻿<template>
  <el-form :model="data" :rules="rules"  label-width="auto" >
<!--    <el-row v-for="field in fieldList">-->
    <el-col :span="12">
      <el-form-item label="展示名称" prop="name">
        <el-input v-model="data.name" autocomplete="off" placeholder="请输入内容" :readonly="readonly"/>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="组件类型" prop="component">
        <el-select v-model="data.component">
          <el-option value="input" label="文本框"></el-option>
          <el-option value="textarea" label="文本域"></el-option>
          <el-option value="radio" v-if="fieldDataType=='boolean'" label="单选按钮"></el-option>
          <el-option value="year-picker" v-if="fieldDataType!='boolean'" label="年份选择框"></el-option>
          <el-option v-if="fieldDataType=='date'" value="date-picker" label="日期选择框"></el-option>
          <el-option v-if="fieldDataType=='string'" value="select" label="选择框"></el-option>
<!--          <el-option v-if="fieldDataType=='string'" value="icon-picker" label="图标选择框"></el-option>-->
          <el-option v-if="fieldDataType=='string'" value="company-select" label="公司选择框"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <template v-if="data.component=='select'">
      <el-col :span="12">
        <el-form-item label="选项数据源" prop="optionSource">
          <el-select v-model="data.optionSource">
            <el-option value="enum" label="枚举常量"></el-option>
            <el-option value="dict" label="字典值"></el-option>
            <el-option value="custom" label="自定义"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="选项数据" prop="optionType">
          <data-select v-if="data.optionSource=='enum'" data-url="/meta/type" v-model="data.optionType"
                    :readonly="readonly">
          </data-select>
          <data-select v-else-if="data.optionSource=='dict'" v-model="data.optionType" autocomplete="off"
                     placeholder="请选择内容" :readonly="readonly" data-url="/dict/data">
          </data-select>
          <el-input v-else :disabled="data.optionSource!='custom'" v-model="data.optionType"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="默认选项" prop="defaultSelect">
          <data-select :data="[{id:'first',name:'第一项'}]" v-model="data.defaultSelect"
                    :readonly="readonly">
          </data-select>
        </el-form-item>
      </el-col>
    </template>
    <template v-if="data.component!='select'&&fieldDataType=='string'">
      <el-col :span="12">
        <el-form-item label="最大长度" prop="maxLength">
          <el-input v-model="data.maxLength" autocomplete="off" placeholder="请输入内容" :readonly="readonly"/>
        </el-form-item>
      </el-col>
    </template>
    <template v-if="fieldDataType=='integer'||fieldDataType=='number'">
      <el-col :span="12">
        <el-form-item label="最小值" prop="minValue">
          <el-input v-model="data.minValue" autocomplete="off" placeholder="请输入内容" :readonly="readonly"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="最大值" prop="maxValue">
          <el-input v-model="data.maxValue" autocomplete="off" placeholder="请输入内容" :readonly="readonly"/>
        </el-form-item>
      </el-col>
    </template>
    <el-col :span="12" v-if="fieldDataType=='number'">
      <el-form-item label="小数位数" prop="digit">
        <el-input v-model="data.digit" autocomplete="off" placeholder="请输入内容" :readonly="readonly"/>
      </el-form-item>
    </el-col>
    <el-col :span="12" v-if="fieldDataType=='date'">
      <el-form-item label="格式化字符串" prop="digit">
        <el-input v-model="data.format" autocomplete="off" placeholder="请输入内容" :readonly="readonly"/>
      </el-form-item>
    </el-col>

    <el-col :span="12">
      <el-form-item label="宽度占比" prop="colSpan">
        <el-select v-model="data.colSpan" clearable allow-create filterable>
          <el-option :value="24" label="整行"></el-option>
          <el-option :value="12" label="二分之一"></el-option>
          <el-option :value="8" label="三分之一"></el-option>
          <el-option :value="16" label="三方之二"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="是否隐藏" prop="colSpan">
        <el-radio-group v-model="data.hide" clearable allow-create filterable>
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-col>
<!--    <el-col :span="12">-->
<!--      <el-form-item label="排序值" prop="sort">-->
<!--        <el-input v-model="data.sort" autocomplete="off" placeholder="请输入内容" :readonly="readonly"/>-->
<!--      </el-form-item>-->
<!--    </el-col>-->
<!--    </el-row>-->

  </el-form>

</template>
<script>
/**
 * 自定义字段数据展示、编辑组件
 */
function noop() {}
export default {
  name: "FieldDisplayConfigForm",
  // props:{
  //   title: {},action:{},headers:{},data:{},name:{},showFileList:{type:Array,default:false}
  //   ,accept:{},'on-preview':{},'on-remove':{},fileList:{type:Array,default:()=>{return []}}
  // },
  props: {
    tableId: {type:String,default:null},
    fieldDataType:{type:String,default: 'string'},
    data:{},
    readonly:{type:Boolean,default:false},
    rules:{},
  },

    data(){
      return {
        isLoading:true,
        enumTypeList:[],
        optionSourceList:[],
      }
    },
  computed:{

  },
  watch: {
    data(val) {
      if(!this.data) {
        return;
      }

    }
  },
  mounted(){
  },
  methods: {

  }
};
</script>
